<template>
	<view>
		<view class="boxContrainer" v-if="orderRent.length > 0">
			<view class="titlBox" @click="clickOpen(1)">
				<text class="title">租金</text>
				<u-icon :name="isOpen1 == true ?'arrow-down':'arrow-up'"></u-icon>
			</view>
			<view class="contentBox" v-if="isOpen1">
				<view v-for="(item, index) in orderRent" :key="index" style="margin: 20rpx; 0">
					<block v-if="item.type == 1">
						<view class="flex-row-center-sb" style="margin-bottom: 20rpx;">
							<text style="font-size: 28rpx;color: #666;">{{item.chargeProjectName}}</text>
							<block v-if="item.isRent == 1"><text style="font-size: 26rpx;color: #2879FF;"
									@click.stop="showRentDetail = !showRentDetail">日租金明细</text></block>
						</view>
						<uni-table ref="table" :loading="loading" border stripe>
							<uni-tr>
								<uni-th width="100" align="center"><text style="color: #2879FF;">单价</text> </uni-th>
								<uni-th width="100" align="center"><text style="color: #2879FF;">数目</text> </uni-th>
								<uni-th width="100" align="center"><text style="color: #2879FF;">费用</text></uni-th>
							</uni-tr>
							<uni-tr>
								<uni-td align="center">{{item.unitPrice}}</uni-td>
								<uni-td align="center">{{item.number}}</uni-td>
								<uni-td align="center">{{item.chargeMoney}}</uni-td>
							</uni-tr>
						</uni-table>
					</block>
					<block v-else>
						<view class="textItem">
							<text>{{item.name}}</text>
							<text style="color: #333;">{{item.chargeMoney}}</text>
						</view>
					</block>
				</view>
			</view>
		</view>

		<view class="boxContrainer" v-if="orderDeposit.length>0">
			<view class="titlBox" @click="clickOpen(2)">
				<text class="title">车辆押金</text>
				<u-icon :name="isOpen2 == true ?'arrow-down':'arrow-up'"></u-icon>
			</view>
			<view class="contentBox" v-if="isOpen2">
				<view class="textItem" v-for="(item, index) in orderDeposit" :key="index">
					<text>{{item.name}}</text>
					<text style="color: #333;">{{item.detail}}</text>
				</view>
			</view>
		</view>

		<view class="boxContrainer" v-if="orderIllegal.length>0">
			<view class="titlBox" @click="clickOpen(3)">
				<text class="title">违章押金</text>
				<u-icon :name="isOpen3 == true ?'arrow-down':'arrow-up'"></u-icon>
			</view>
			<view class="contentBox" v-if="isOpen3">
				<view class="textItem" v-for="(item, index) in orderIllegal" :key="index">
					<text>{{item.name}}</text>
					<text style="color: #333;">{{item.detail}}</text>
				</view>

			</view>
		</view>

		<view class="boxContrainer" v-if="orderVehicle.length>0">
			<view class="titlBox" @click="clickOpen(4)">
				<text class="title">车损费用</text>
				<u-icon :name="isOpen4 == true ?'arrow-down':'arrow-up'"></u-icon>
			</view>
			<view class="contentBox" v-if="isOpen4">
				<view class="textItem" v-for="(item, index) in orderVehicle" :key="index">
					<text>{{item.name}}</text>
					<text style="color: #333;">{{item.renewCost}}</text>
				</view>
			</view>
		</view>

		<view class="boxContrainer" v-if="orderViolation.length > 0">
			<view class="titlBox" @click="clickOpen(5)">
				<text class="title">违章费用</text>
				<u-icon :name="isOpen5 == true ?'arrow-down':'arrow-up'"></u-icon>
			</view>
			<view class="contentBox" v-if="isOpen5">
				<view class="textItem" v-for="(item, index) in orderViolation" :key="index">
					<text>{{item.documentNo}}</text>
					<text style="color: #333;">{{item.deductions}}</text>
				</view>
			</view>
		</view>
        
		<u-popup :show="showRentDetail" mode="center" @close="showRentDetail = false" closeable round="12">
			<view class="flex-colum-center" style="padding: 40rpx 24rpx">
				<view style="margin-bottom: 30rpx;">费用租赁明细</view>
				<scroll-view scroll-y="true">
					<view style="max-height: 800rpx;">
						<view class="flex-row-center-sb payCostItem" v-for="(item, index) in orderPriceCalendars"
							:key="index">
							<text>{{ item.sameDay }}</text>
							<text>{{ item.price }}元</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		name: '',
		data() {
			return {
				isOpen1: false,
				isOpen2: false,
				isOpen3: false,
				isOpen4: false,
				isOpen5: false,
				showRentDetail : false
			}
		},
		props: {
			// 租金
			orderRent: {
				type: Array,
				default () {
					return []
				}
			},
			// 车辆押金
			orderDeposit: {
				type: Array,
				default () {
					return []
				}
			},
			// 违章押金
			orderIllegal: {
				type: Array,
				default () {
					return []
				}
			},
			// 车损
			orderVehicle: {
				type: Array,
				default () {
					return []
				}
			},
			// 违章费用
			orderViolation: {
				type: Array,
				default () {
					return []
				}
			},
			// 价格日历
			orderPriceCalendars : {
				type: Array,
				default () {
					return []
				}
			}
		},
		mounted() {

		},
		methods: {
			clickOpen(type) {
				switch (type) {
					case 1:
						this.isOpen1 = !this.isOpen1;
						break;
					case 2:
						this.isOpen2 = !this.isOpen2;
						break;
					case 3:
						this.isOpen3 = !this.isOpen3;
						break;
					case 4:
						this.isOpen4 = !this.isOpen4;
						break;
					case 5:
						this.isOpen5 = !this.isOpen5;
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.payCostItem {
		height: 80rpx;
		width: 600rpx;
		border-bottom: 1rpx solid #ededed;
		font-size: 28rpx;
		color: #333;
	}
</style>
